{extend name="platform/base" /}
{block name="resources"/}
<!-- 选择商品图，弹出框的样式 -->
<link rel="stylesheet" type="text/css" href="ADMIN_CSS/defau.css">
<!-- 用 ，加载数据-->
<script src="ADMIN_JS/art_dialog.source.js"></script>
<script src="ADMIN_JS/iframe_tools.source.js"></script>
<!-- 我的图片 -->
<script src="ADMIN_JS/material_managedialog.js"></script>
<style>
	.chairs-css{color: #999;height:30px;line-hegiht:30px;margin-bottom:0;}
	.search-css{float:right;}
	.button-css{border-radius:0;border:1px solid #aaa;height:24px;background-color:#e8e8e8;}
</style>
{/block}
{block name="main"} 
<div class="row padder-v">

	<div class="col-sm-9" >
		 <p class="chairs-css">今日新增会员：{$user_today_num}&nbsp;|&nbsp;本月新增会员：{$user_month_num}&nbsp;|&nbsp;会员总数：{$user_count_num}</p>
	</div>
	<div class="col-sm-2" >
		<select id="date-type" class="input-sm form-control" >
			<option value="1">本日</option>
			<option value="3">本周</option>
			<option value="4">本月</option>
		</select>
	</div>
	<div class="col-sm-1">
		<button class="btn btn-sm btn-default" type="button"
			onclick="search()">搜索</button>
	</div>
</div>
            <div class="row">
              <div class="col-md-12">
               
                <section class="panel panel-default">
                  <header class="panel-heading font-bold">
                  	新增会员  <a style="display:block;float:right;cursor:pointer;" onclick="openMemberDialog();">明细</a>
                  </header>
                  <div class="panel-body">
                    <div id="container" style="height:210px"></div>
                  </div>                
                </section>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
               
                <section class="panel panel-default">
                  <header class="panel-heading font-bold">
                  	会员余额走势图 <a style="display:block;float:right;cursor:pointer;" onclick="OpenBalanceRecordDialog();">明细</a>
                  </header>
                  <div class="panel-body">
                    <div id="container-1" style="height:210px"></div>
                  </div>                
                </section>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
               
                <section class="panel panel-default">
                  <header class="panel-heading font-bold">
                  	会员积分走势图 <a style="display:block;float:right;cursor:pointer;" onclick="OpenIntegralRecordDialog();">明细</a>
                  </header>
                  <div class="panel-body">
                    <div id="container-2" style="height:210px"></div>
                  </div>                
                </section>
              </div>
            </div>
{/block}
{block name="script"}            
<script type="text/javascript" src="__STATIC__/My97DatePicker/WdatePicker.js"></script>
<script src="__STATIC__/js/highcharts.js"></script>
<script src="__STATIC__/js/exporting.js"></script>
<script>

	var addMemberChart,addMemberTime,addMemberStatistical;// 新增会员
	var addBalanceChart,addBalanceTime,addBalanceStatistical;// 会员余额
	var addIntegralChart,addIntegralTime,addIntegralStatistical;// 会员积分
	
	// 新增会员
	addMemberTime = [ '00:00', '01:00', '02:00', '03:00', '04:00',
						'05:00', '06:00', '07:00', '08:00', '09:00',
						'10:00', '11:00', '12:00', '13:00', '14:00',
						'15:00', '16:00', '17:00', '18:00', '19:00',
						'20:00', '21:00', '22:00', '23:00' ];
	
	addMemberStatistical = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
	
	// 会员余额
	addBalanceTime = addMemberTime;
	addBalanceStatistical = [0.00,0.00,0.00,0.00,0.00,0.00,
	                         0.00,0.00,0.00,0.00,0.00,0.00,
	                         0.00,0.00,0.00,0.00,0.00,0.00,
	                         0.00,0.00,0.00,0.00,0.00,0.00];
	
	// 会员积分
	addIntegralTime = addMemberTime;
	addIntegralStatistical = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
	
	$(function() {
		// 新增会员
		addMemberChart = new Highcharts.Chart('container', {
			
		    title: {
		        text: '会员新增趋势',
		        x: -20
		    },
		   
		    xAxis: {
		        categories: addMemberTime,
		        tickInterval:1
		    },
		    lang : {
				printChart : "打印",
				downloadPNG : "导出PNG格式图片",
				downloadJPEG : "导出JPEG格式图片",
				downloadPDF : "导出PDF格式图片",
				downloadSVG : "导出SVG格式图片"
			},
		    yAxis: {
		        title: {
		            text: '人数'
		        },
		        plotLines: [{
		            value: 0,
		            width: 1,
		            color: '#808080'
		        }]
		    },
		    credits:{
		        enabled:false // 禁用版权信息
		    },	
		    tooltip: {
		        valueSuffix: '人'
		    },
		    legend: {
		        layout: 'vertical',
		        align: 'right',
		        verticalAlign: 'middle',
		        borderWidth: 0
		    },
		    series: [{
		        name: '新增会员',
		        data: addMemberStatistical
		    }]
		});
		
		// 会员余额
		addBalanceChart = new Highcharts.Chart('container-1', {
						
		    title: {
		        text: '会员余额走势',
		        x: -20
		    },
		   
		    xAxis: {
		        categories: addBalanceTime,
		        tickInterval:1
		    },
		    lang : {
				printChart : "打印",
				downloadPNG : "导出PNG格式图片",
				downloadJPEG : "导出JPEG格式图片",
				downloadPDF : "导出PDF格式图片",
				downloadSVG : "导出SVG格式图片"
			},
		    yAxis: {
		        title: {
		            text: '元'
		        },
		        plotLines: [{
		            value: 0,
		            width: 1,
		            color: '#808080'
		        }]
		    },
		    credits:{
		        enabled:false // 禁用版权信息
		    },	
		    tooltip: {
		        valueSuffix: '元'
		    },
		    legend: {
		        layout: 'vertical',
		        align: 'right',
		        verticalAlign: 'middle',
		        borderWidth: 0
		    },
		    series: [{
		        name: '会员余额',
		        data: addBalanceStatistical
		    }]
		});	
		
		// 会员积分
		addIntegralChart = new Highcharts.Chart('container-2', {
			
		    title: {
		        text: '会员积分走势',
		        x: -20
		    },
		   
		    xAxis: {
		        categories: addIntegralTime,
		        tickInterval:1
		    },
		    lang : {
				printChart : "打印",
				downloadPNG : "导出PNG格式图片",
				downloadJPEG : "导出JPEG格式图片",
				downloadPDF : "导出PDF格式图片",
				downloadSVG : "导出SVG格式图片"
			},
		    yAxis: {
		        title: {
		            text: '个'
		        },
		        plotLines: [{
		            value: 0,
		            width: 1,
		            color: '#808080'
		        }]
		    },
		    credits:{
		        enabled:false // 禁用版权信息
		    },	
		    tooltip: {
		        valueSuffix: '积分'
		    },
		    legend: {
		        layout: 'vertical',
		        align: 'right',
		        verticalAlign: 'middle',
		        borderWidth: 0
		    },
		    series: [{
		        name: '会员积分',
		        data: addIntegralStatistical,
		    }]
		});	
		
		search();
	})
	
	// 更新新增会员
	function update_member(){
		var date = $("#date-type").val();
		$.ajax({
			type : "post",
			url : "{:__URL('PLATFORM_MAIN/statistics/memberRegisterCount')}",
			async : true,
			data:{'date':date},
			success : function(data) {
				addMemberChart.update({
 					xAxis : {
 						categories : data[0],
 						
 					},
 					series : [ {
 						data : data[1]
 					}],
 				})
			}
		});
	}
	
	// 更新会员余额
	function update_balance(){
		var date = $("#date-type").val();
		$.ajax({
			type : "post",
			url : "{:__URL('PLATFORM_MAIN/statistics/memberBalanceCount')}",
			async : true,
			data:{'date':date},
			success : function(data) {
				addBalanceChart.update({
 					xAxis : {
 						categories : data[0]
 					},
 					series : [ {
 						data : data[1]
 					}],
 				})
			}
		});
	}
	
	// 更新会员积分
	function update_integral(){
		var date = $("#date-type").val();
		$.ajax({
			type : "post",
			url : "{:__URL('PLATFORM_MAIN/statistics/memberIntegralCount')}",
			async : true,
			data:{'date':date},
			success : function(data) {
				addIntegralChart.update({
 					xAxis : {
 						categories : data[0]
 					},
 					series : [ {
 						data : data[1]
 					}],
 				})
			}
		});
	}
	
	// 根据不同类型调用方法返回数据更新图表
	function search(){
		update_member();
		update_balance();
		update_integral();
	}
	
	/**
	*弹出框
	*/
	function openMemberDialog(){
		OpenMemberRegisterDialog(PLATFROMMAIN);
	}
	
	function OpenBalanceRecordDialog(){
		OpenMemberAccountBalanceRecordDialog(PLATFROMMAIN);
	}
	function OpenIntegralRecordDialog(){
		OpenMemberAccountIntegralRecordDialog(PLATFROMMAIN);
	}
</script>
{/block}
